<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <title>Jcx-Blog</title>
    <meta content="telephone=no" name="format-detection">
    <meta content="var(--heo-card-bg)" name="theme-color">
    <link rel="shortcut icon" href="src/assets/images/logo.png">
    <!-- css 依赖库 -->
    <link rel="stylesheet" href="res/snackbar@0.1.14/snackbar.min.css">
    <link rel="stylesheet" href="res/prism@1.29.0/prism.min.css">
    <link rel="stylesheet" href="res/prism@1.29.0/code.css">
    <link rel="stylesheet" href="res/prism@1.29.0/prism-one-light.css" data-code-theme="light">
    <link rel="stylesheet" href="res/prism@1.29.0/prism-one-dark.css" data-code-theme="dark">
    <link rel="stylesheet" href="res/APlayer@1.1/APlayer.min.css">
    <link rel="stylesheet" href="res/search-widget@2.0.0/style.css">
    <link rel="stylesheet" href="res/Swiper@8.0.6/swiper-bundle.min.css">
    <link rel="stylesheet" href="src/assets/css/base.css">
    <link rel="stylesheet" href="src/assets/css/custom.css">
    <link rel="stylesheet" href="src/assets/css/barrage.css">
    <link rel="stylesheet" href="src/assets/icon/iconfont.css">

    <!-- js 依赖库 -->
    <script src="res/vue@3.2.47/vue.global.js"></script>
    <script src="res/vuex@4.0.2/vuex.global.js"></script>
    <script src="res/vue-router@4.1.6/vue-router.global.js"></script>
    <script src="res/vue-i18n@9.2.2/vue-i18n.global.js"></script>
    <script src="res/vue3-sfc-loader@0.8.4/vue3-sfc-loader.js"></script>
    <script src="res/vue3-sfc-loader@0.8.4/options.js"></script>
    <script src="res/axios@1.x/axios.js"></script>
    <script src="res/element-plus@2.3.3/dist/index.full.js"></script>
    <script src="res/element-plus@2.3.3/dist/index.iife.min.js"></script>
    <script src="res/crypto-js@4.1.1/crypto-js.min.js"></script>
    <script src="res/JSEncrypt@3.3.2/js-encrypt.min.js"></script>
    <script src="res/snackbar@0.1.14/snackbar.min.js"></script>
    <script src="res/prism@1.29.0/prism.min.js"></script>
    <script src="res/APlayer@1.1/APlayer.min.js"></script>
    <script src="res/Meting@2/Meting2.min.js"></script>
    <script src="res/search-widget@2.0.0/search-widget.iife.js" defer></script>
    <script src="res/Swiper@8.0.6/swiper-bundle.min.js" defer></script>
    <!-- 动态加载条 -->
    <script src="res/pace@1.2.4/pace.min.js"
            data-pace-options="{&quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"></script>
</head>
<body>

<!-- canvas 深色模式下添加粒子效果 -->
<canvas id="universe" width="1312" height="880"></canvas>

<div id="app">
</div>

<!-- 根据配置设置 css 变量值，全局 css 通过变量值进行处理 -->
<style type="text/css">
    [theme_mode=light] {
        --heo-theme: #425AEF !important;
        --heo-theme-op: #425AEF23 !important;
        --heo-theme-op-deep: #425AEFdd !important;
        --heo-theme-none: #425AEF00 !important;
    }

    [theme_mode=dark] {
        --heo-theme: #f2b94b !important;
        --heo-theme-op: #f2b94b23 !important;
        --heo-theme-op-deep: #f2b94bdd !important;
        --heo-theme-none: #f2b94b00 !important;
    }

    .color-scheme-dark, .dark, [data-color-scheme=dark] {
        --halo-search-widget-color-modal-layer: var(--heo-maskbgdeep);
        --halo-search-widget-color-modal-content-bg: var(--heo-card-bg);
        --halo-search-widget-color-form-input: rgb(255 255 255 / 79.9%);
        --halo-search-widget-color-form-input-placeholder: #6b7280d9;
        --halo-search-widget-color-form-input-bg: var(--heo-card-bg);
        --halo-search-widget-color-form-divider: #bbbbbb0f;
        --halo-search-widget-color-result-item-bg: var(--heo-card-bg);
        --halo-search-widget-color-result-item-hover-bg: #90939914;
        --halo-search-widget-color-result-item-title: rgb(255 255 255 / 79.9%);
        --halo-search-widget-color-result-item-content: #ffffff82;
        --halo-search-widget-color-command-kbd-item: #c0c4ccb3;
        --halo-search-widget-color-command-kbd-border: #bbbbbb0f;
        --halo-search-widget-color-result-empty: #6b7280d9
    }

    [theme_mode=light] {
        --halo-search-widget-color-result-item-title: #4B5563
    }

    #greetingBox {
        position: fixed;
        top: 10px;
        left: 15%;
        width: 400px;
        text-align: center;
        z-index: 10000;
        pointer-events: none
    }

    #greeting {
        display: inline-block;
        position: relative;
        opacity: 0;
        top: -110px;
        padding: 5px 40px;
        border-radius: 50px;
        background-color: #fff;
        color: #000;
        font-size: small;
        transition: .5s;
        box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
    }

    #greeting.shown {
        opacity: 1;
        top: 0
    }
</style>

<script type="module" src="src/main.js"></script>
</body>
</html>